<template>
  <div class="components-demo">
    <h1>组件演示</h1>
    <p>Vue Toolkit 提供的可复用 UI 组件展示</p>

    <!-- Button 组件演示 -->
    <section class="demo-section">
      <h2>Button 按钮组件</h2>
      <div class="demo-content">
        <div class="demo-preview">
          <h4>基础用法</h4>
          <div class="button-group">
            <Button type="primary" @click="handleButtonClick('primary')">
              主要按钮
            </Button>
            <Button type="secondary" @click="handleButtonClick('secondary')">
              次要按钮
            </Button>
            <Button type="danger" @click="handleButtonClick('danger')">
              危险按钮
            </Button>
            <Button type="text" @click="handleButtonClick('text')">
              文本按钮
            </Button>
          </div>

          <h4>不同尺寸</h4>
          <div class="button-group">
            <Button size="small">小按钮</Button>
            <Button size="medium">中按钮</Button>
            <Button size="large">大按钮</Button>
          </div>

          <h4>特殊状态</h4>
          <div class="button-group">
            <Button :loading="loading" @click="toggleLoading">
              {{ loading ? '加载中...' : '点击加载' }}
            </Button>
            <Button disabled>禁用按钮</Button>
            <Button block>块级按钮</Button>
          </div>

          <h4>形状变化</h4>
          <div class="button-group">
            <Button round>圆角按钮</Button>
            <Button circle>+</Button>
          </div>
        </div>
        
        <div class="demo-code">
          <h4>代码示例</h4>
          <pre><code>{{ buttonCode }}</code></pre>
        </div>
      </div>
    </section>

    <!-- Modal 组件演示 -->
    <section class="demo-section">
      <h2>Modal 模态框组件</h2>
      <div class="demo-content">
        <div class="demo-preview">
          <h4>基础用法</h4>
          <div class="button-group">
            <Button @click="showBasicModal">基础模态框</Button>
            <Button @click="showCenteredModal">居中模态框</Button>
            <Button @click="showCustomModal">自定义模态框</Button>
          </div>

          <!-- 基础模态框 -->
          <Modal 
            v-model:visible="basicModalVisible" 
            title="基础模态框"
            @ok="handleModalOk"
            @cancel="handleModalCancel"
          >
            <p>这是一个基础模态框的内容。</p>
            <p>您可以在这里放置任何内容。</p>
          </Modal>

          <!-- 居中模态框 -->
          <Modal 
            v-model:visible="centeredModalVisible" 
            title="居中模态框"
            centered
            @ok="handleModalOk"
            @cancel="handleModalCancel"
          >
            <p>这是一个居中显示的模态框。</p>
          </Modal>

          <!-- 自定义模态框 -->
          <Modal 
            v-model:visible="customModalVisible" 
            title="自定义模态框"
            width="800"
            :ok-loading="confirmLoading"
            ok-text="确认提交"
            cancel-text="取消操作"
            @ok="handleCustomOk"
            @cancel="handleModalCancel"
          >
            <div style="padding: 20px 0;">
              <h4>自定义内容区域</h4>
              <p>这个模态框具有自定义的宽度、按钮文本和确认加载状态。</p>
              <div style="background: #f5f5f5; padding: 16px; border-radius: 4px; margin: 16px 0;">
                <strong>提示：</strong>点击确认按钮会显示加载状态，2秒后自动关闭。
              </div>
            </div>
          </Modal>
        </div>
        
        <div class="demo-code">
          <h4>代码示例</h4>
          <pre><code>{{ modalCode }}</code></pre>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import Button from 'vue-toolkit/lib/components/button'
import Modal from 'vue-toolkit/lib/components/modal'

// Button 相关状态
const loading = ref(false)

// Modal 相关状态
const basicModalVisible = ref(false)
const centeredModalVisible = ref(false)
const customModalVisible = ref(false)
const confirmLoading = ref(false)

// Button 事件处理
const handleButtonClick = (type: string) => {
  console.log(`点击了 ${type} 按钮`)
}

const toggleLoading = () => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 2000)
}

// Modal 事件处理
const showBasicModal = () => {
  basicModalVisible.value = true
}

const showCenteredModal = () => {
  centeredModalVisible.value = true
}

const showCustomModal = () => {
  customModalVisible.value = true
}

const handleModalOk = () => {
  console.log('模态框确认')
}

const handleModalCancel = () => {
  console.log('模态框取消')
}

const handleCustomOk = () => {
  confirmLoading.value = true
  setTimeout(() => {
    confirmLoading.value = false
    customModalVisible.value = false
    console.log('自定义确认完成')
  }, 2000)
}

// 代码示例
const buttonCode = `<!-- 基础用法 -->
<Button type="primary">主要按钮</Button>
<Button type="secondary">次要按钮</Button>
<Button type="danger">危险按钮</Button>

<!-- 不同尺寸 -->
<Button size="small">小按钮</Button>
<Button size="medium">中按钮</Button>
<Button size="large">大按钮</Button>

<!-- 特殊状态 -->
<Button :loading="loading">加载按钮</Button>
<Button disabled>禁用按钮</Button>
<Button block>块级按钮</Button>

<!-- 形状变化 -->
<Button round>圆角按钮</Button>
<Button circle>+</Button>`

const modalCode = `<!-- 基础模态框 -->
<Modal 
  v-model:visible="modalVisible" 
  title="模态框标题"
  @ok="handleOk"
  @cancel="handleCancel"
>
  <p>模态框内容</p>
</Modal>

<!-- 居中模态框 -->
<Modal 
  v-model:visible="modalVisible" 
  title="居中模态框"
  centered
>
  <p>居中显示的模态框</p>
</Modal>

<!-- 自定义模态框 -->
<Modal 
  v-model:visible="modalVisible" 
  title="自定义模态框"
  width="800"
  :ok-loading="loading"
  ok-text="确认提交"
  cancel-text="取消操作"
>
  <p>自定义内容</p>
</Modal>`
</script>

<style scoped>
.components-demo h1 {
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.components-demo > p {
  color: #7f8c8d;
  font-size: 1.1rem;
  margin-bottom: 3rem;
}

.button-group {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
}

.button-group h4 {
  width: 100%;
  margin-bottom: 0.5rem;
  color: #495057;
  font-size: 1rem;
  font-weight: 600;
}

.demo-preview h4 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #495057;
  font-size: 1.1rem;
  font-weight: 600;
  border-bottom: 1px solid #e9ecef;
  padding-bottom: 0.5rem;
}

.demo-preview h4:first-child {
  margin-top: 0;
}

.demo-code h4 {
  margin-top: 0;
  margin-bottom: 1rem;
  color: #495057;
  font-size: 1.1rem;
  font-weight: 600;
}
</style>